import React, { memo, useEffect, useRef, useState } from 'react'
import { NavLink, withRouter } from 'react-router-dom'
import { Carousel, Image } from 'antd';
import { LeftOutlined, RightOutlined } from '@ant-design/icons'


// 导入 关于图片的 常量
import { PlaceholderImg, ImgError } from '../../../../../constant/local-constant'
// 引入自己的方法
import { getNewSong } from '../../../../../api/otherApi'
import { XingeshoufaBox } from './style'

function Xingeshoufa(props) {
  // state
  // 这里的推荐就是全部
  const [nav] = useState([{ type: 0, name: "推荐" }, { type: 7, name: "华语" }, { type: 96, name: "欧美" }, { type: 8, name: "日本" }, { type: 16, name: "韩国" }])
  const [index, setIndex] = useState(0) // xx变色 的索引
  const [list, setList] = useState([])
  const CarouselRef = useRef()

  const XingeshoufaRef = useRef()
  // redux hooks

  // other hooks
  useEffect(() => {
    // console.log(index);
    getNewSong(nav[index].type).then(res => {
      // console.log(res.data.slice(0, 90));
      setList(res.data.slice(0, 36))
      CarouselRef.current.goTo(0, false)
      // console.log(list);
    })
  }, [index])
  // other handle
  // 去 歌曲播放页面
  // const toPlayer = (id) => {
  //   console.log(props, id);
  //   props.history.push(`/player/${id}`)
  // }

  // useEffect(() => {
  //   console.log(XingeshoufaRef);
  // })
  // console.log(document.querySelector(".xingeshoufaObserver"));
  // console.log(XingeshoufaRef);
  return (

    <XingeshoufaBox ref={XingeshoufaRef} className="xingeshoufaObserver">
      <div className="wrap">
        <div className="title">
          <h2>新歌首发</h2>
        </div>
        <div className="fenlei">
          {
            nav.map((item, i) => {
              return (
                <span
                  className={index === i ? "active" : ''}
                  onClick={e => setIndex(i)}
                  key={i}
                >{item.name}</span>
              )
            })
          }
        </div>
        <Carousel
          ref={CarouselRef}
        >
          {
            list.map((ele, index) => {
              if (index % 9 === 0) {
                return (
                  <div className="banner_main" key={index}>
                    {
                      list.slice(index, index + 9).map((item, indexx) => {
                        return (
                          <NavLink to={`/player/${item.id}`} target="_blank" className="banner_main_box" key={item.id} >
                            <div className="banner_main_left">
                              {/* <img src={item.album.blurPicUrl} alt="" /> */}
                              <Image
                                width={86}
                                height={86}
                                src={item.album.blurPicUrl}
                                preview={false}
                                fallback={ImgError}
                                placeholder={
                                  <Image
                                    preview={false}
                                    width={86}
                                    height={86}
                                    src={PlaceholderImg}
                                  />
                                }
                              />
                              <i className="img_mask"></i>
                              <i className="img_play"></i>
                            </div>
                            <div className="banner_main_center">
                              <h3 className="one-txt-cut">{item.name}</h3>
                              <span>{item.artists[0].name}</span>
                            </div>
                            {/* <div className="banner_main_right">
                              00:00
                            </div> */}
                          </NavLink>
                        )
                      })
                    }
                  </div>
                )
              }
            })
          }

        </Carousel>
        <i className="pre toggle" onClick={e => { CarouselRef.current.prev() }}>
          <LeftOutlined />
        </i>
        <i className="next toggle" onClick={e => { CarouselRef.current.next() }}>
          <RightOutlined />
        </i>
      </div>

    </XingeshoufaBox>
  )
}

export default memo(withRouter(Xingeshoufa))



